<div
  class="m-grid__item m-grid__item--fluid m-grid m-grid--desktop m-grid--ver-desktop m-grid--hor-tablet-and-mobile m-login m-login--6"
  id="m_login">
  <div class="m-grid__item   m-grid__item--order-tablet-and-mobile-2 m-grid m-grid--hor m-login__aside"
    style="background-image: url(assets/app/media/img/bg/bg-4.jpg);">
    <div class="m-grid__item">
      <div class="m-login__logo">
        <a href="#">
          <img src="/api/profile/logo" />
        </a>
      </div>
    </div>

    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver">
      <div class="m-grid__item m-grid__item--middle" *ngIf="profile$ | async as profile">
        <span class="m-login__title">{{ profile?.name }}</span>
        <span class="m-login__subtitle"></span>
      </div>
    </div>

    <div class="m-grid__item">
      <div class="m-login__info">
        <div class="m-login__section">
          <a href="javascript:;" class="m-link">
            2020 Copyright © 统信软件技术有限公司 版权所有
          </a>
        </div>
        <!-- <div class="m-login__section">
					<a href="javascript:;" class="m-link">Privacy</a>
					<a href="javascript:;" class="m-link">Legal</a>
					<a href="javascript:;" class="m-link">Contact</a>
				</div> -->
      </div>
    </div>
  </div>

  <div class="m-grid__item m-grid__item--fluid  m-grid__item--order-tablet-and-mobile-1 m-login__wrapper">
    <!--begin::Body-->
    <div class="m-login__body">
      <div class="m-login__signin m-login--modify-password ng-star-inserted">
        <div class="m-login__title col-10">
          <h3>重置密码</h3>
        </div>
        <form class="m-login__form no-gutters" (ngSubmit)="onSubmit()" [formGroup]="form">
          <div class="row no-gutters">
            <div class="form-group col-8 offset-1">
              <label for="username">手机号</label>
              <input id="mobileno" type="text" class="form-control" formControlName="mobileno" />
              <div class="invalid-feedback" *ngIf="this.form.get('mobileno').errors as errors">
                <span *ngIf="errors.required">
                  请输入手机号码
                </span>
                <span *ngIf="errors.pattern">
                  请输入正确格式的手机号码
                </span>
              </div>
            </div>
            <button type="button" *ngIf="sendCaptcha!==true" [disabled]="form.controls['mobileno'].invalid"
              (click)="onSendClick()" class="btn btn-primary align-self-start captcha-btn">
              获取验证码
            </button>
            <button type="button" *ngIf="sendCaptcha===true" class="btn btn-secondary align-self-start captcha-btn">
              {{interval$ | async}}秒后重发
            </button>
          </div>
          <div class="form-group no-gutters col-8 offset-1">
            <label for="password">验证码</label>
            <input id="code" type="text" class="form-control" formControlName="captcha" />
            <div class="invalid-feedback" *ngIf="this.form.get('captcha').errors as errors">
              <span *ngIf="errors.required">
                请输入验证码
              </span>
            </div>
          </div>
          <div class="form-group no-gutters col-8 offset-1">
            <label for="password">重置密码</label>
            <input id="password" type="password" class="form-control" formControlName="password"
              placeholder="不少于8位，包含数字、字母和符号" />
            <div class="invalid-feedback" *ngIf="this.form.get('password').errors as errors">
              <span *ngIf="errors.required">
                请输入新密码
              </span>
              <span *ngIf="errors.pattern">
                密码不少于8位，包含数字、字母和符号
              </span>
            </div>
          </div>
          <div class="form-group no-gutters col-8 offset-1">
            <label for="password">确认密码</label>
            <input id="password_confirm" type="password" class="form-control" formControlName="password_confirm" />
            <div class="invalid-feedback" *ngIf="this.form.get('password_confirm').errors as errors">
              <span *ngIf="errors.required">
                请再次输入密码
              </span>
              <span *ngIf="errors.confirm">
                两次密码输入不一致
              </span>
            </div>
          </div>
          <button type="submit" class="offset-1 m--margin-top-20 btn btn-primary px-5">保存</button>
        </form>
      </div>
    </div>
  </div>
</div>

<ng-template #alertRef>
  <div class="modal-body">
    <p style="font-size: 20px; padding-left: 20px;">密码修改成功</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="dialog.closeAll()">确定</button>
  </div>
</ng-template>